<template>
  <div class="app-container">
    <el-card shadow="never">
      <!-- 小标题 -->
      <div class="title">搜索条件</div>
      <div class="search-wrap">
        <el-form label-width="100px">
          <el-form-item label="操作时间：">
            <div class="item">
              <el-radio-group v-model="chooseTime" @change="changeTime">
                <el-radio :label="1" border>全部</el-radio>
                <el-radio :label="2" border>今天</el-radio>
                <el-radio :label="3" border>昨天</el-radio>
                <el-radio :label="4" border>自定义</el-radio>
              </el-radio-group>
              <el-date-picker
                v-show="chooseTime === 4"
                v-model="datePicker"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                @change="changePickTime"
              />
            </div>
          </el-form-item>
          <el-form-item label="交易流水号：">
            <div class="item">
              <el-input v-model="get_income_record_info_list.payment_serial_number" placeholder="请输入流水号" clearable @keyup.enter.native="getIncomeExpendRecordInfoList" />
            </div>
          </el-form-item>
          <el-form-item label="收入项目：">
            <div class="item">
              <el-checkbox-group v-model="get_income_record_info_list.type" :min="1" @change="getIncomeExpendRecordInfoList">
                <el-checkbox
                  v-for="item in type"
                  :key="item.value"
                  :label="item.value"
                  style="margin: 0.2rem 0.8rem 0.2rem 0;"
                  border
                >
                  {{ item.label }}({{ item.num }})
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
          <el-form-item label="归属区域：">
            <div class="item">
              <el-checkbox-group
                v-model="get_income_record_info_list.area_id"
                :min="1"
                @change="getIncomeExpendRecordInfoList"
              >
                <el-checkbox
                  v-for="(item, index) in data_income_record_info_list.area"
                  :key="index"
                  :label="item.area_id"
                  style="margin: 0.2rem 0.8rem 0.2rem 0;"
                  border
                >
                  [{{ item.area_number }}]{{ item.name }}({{ item.num }})
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card shadow="never">
      <div>
        <span class="title">收入管理</span>
        <!-- <el-button type="success" class="title-button-right" icon="el-icon-sort-down" plain>导出</el-button> -->
      </div>

      <!-- 数据表 -->
      <el-table
        v-loading="dataRequestLoading"
        element-loading-text="正在加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.5)"
        :data="data_income_record_info_list.data"
        class="table"
        :height="tableHeight"
        :max-height="tableHeight"
        highlight-current-row
      >
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column prop="create_time" label="进账日期" />
        <el-table-column prop="remark" label="收入项目" />
        <el-table-column label="账目类型">
          <template slot-scope="{ row }">
            <span>{{ type_text(row.type) }}</span>
          </template>
        </el-table-column>
        <el-table-column width="68px" label="用户头像">
          <template slot-scope="{ row }">
            <el-image v-if="row.avatar_url != null" :src="row.avatar_url" style="width:30px;height:30px" :preview-src-list="[row.avatar_url]" />
            <span v-else>暂无</span>
          </template>
        </el-table-column>
        <el-table-column label="用户昵称">
          <template slot-scope="{ row }">
            <span>{{ row.nick_name != null ? row.nick_name : '暂无' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="交易流水号">
          <template slot-scope="{ row }">
            <span>{{ row.payment_serial_number != '' ? row.payment_serial_number : '暂无' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="payment_serial_number" label="云打印订单号/需求订单号">
          <template slot-scope="{ row }">
            <span v-if="row.print_order_number !== null">{{ row.print_order_number }}</span>
            <span v-else-if="row.demand_order_number !== null">{{ row.demand_order_number }}</span>
            <span v-else>暂无</span>
          </template>
        </el-table-column>
        <el-table-column prop="change_amount" label="金额">
          <template slot-scope="{ row }">
            <span>{{ -row.change_amount > 0 ? '+' + -row.change_amount : -row.change_amount }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="primary" @click="remarkEvent">备注</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- 数据表 -->

      <!-- 分页 -->
      <el-pagination
        class="pagination"
        background
        layout="total, sizes,prev, pager, next, jumper"
        :total="data_income_record_info_list.total"
        :page-size="get_income_record_info_list.pageSize"
        :page-sizes="[20, 50, 100]"
        :current-page="get_income_record_info_list.currentPage"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"
      />
      <!-- 分页 -->
    </el-card>
  </div>
</template>

<script>
import { pickerOptionsMixin } from '@/mixins/pickerOptions'
import { getIncomeExpendRecordInfoList } from '@/api/revenue-manage'
import { getDatatime } from '@/common/js/until'

export default {
  mixins: [pickerOptionsMixin],
  data() {
    return {
      // table高度自适应
      tableHeight: window.innerHeight - 255,

      // loading开关
      dataRequestLoading: false,

      chooseTime: 1,
      datePicker: [],

      // 项目类型显示
      type: [
        { value: 0, label: '直接消费', num: 0 },
        { value: 1, label: '余额消费', num: 0 },
        { value: 2, label: '余额提现', num: 0 },
        { value: 3, label: '充值余额', num: 0 },
        { value: 4, label: '退款到余额', num: 0 },
        { value: 5, label: '直接退款', num: 0 }
        // { value: 6, label: '接单收入', num: 0 }
        // { value: 7, label: '日常支出', num: 0 }
      ],

      // 第一次请求
      once: false,

      // 查询账目收入管理请求值
      get_income_record_info_list: {
        pageSize: 20,
        currentPage: 1,
        sort_name: '',
        sort: 'desc',
        type: [0, 1, 2, 3, 4, 5],
        payment_serial_number: '',
        start_time: '',
        end_time: '',
        area_id: [1]
      },

      // 查询账目收入管理返回值
      data_income_record_info_list: {
        data: [],
        area: [],
        total: 0
      }
    }
  },
  mounted() {
    this.getIncomeExpendRecordInfoList() // 查询账目收入管理
  },
  methods: {
    // 查询账目收入管理
    getIncomeExpendRecordInfoList() {
      this.dataRequestLoading = true
      getIncomeExpendRecordInfoList(this.get_income_record_info_list).then(res => {
        this.dataRequestLoading = false
        this.data_income_record_info_list = {
          data: res.result.showing,
          area: res.result.area,
          total: res.result.total
        }
        this.type[0].num = res.result.typeNum.type0_num
        this.type[1].num = res.result.typeNum.type1_num
        this.type[2].num = res.result.typeNum.type2_num
        this.type[3].num = res.result.typeNum.type3_num
        this.type[4].num = res.result.typeNum.type4_num
        this.type[5].num = res.result.typeNum.type5_num

        if (this.once === false) {
          this.get_income_record_info_list.area_id = []
          this.data_income_record_info_list.area.forEach(val => {
            this.get_income_record_info_list.area_id.push(val.area_id)
          })
          this.once = true
          this.getIncomeExpendRecordInfoList()
        }
      })
    },

    // 账目类型显示
    type_text(data) {
      const type = this.type.filter(v => {
        if (v.value === data) {
          return v.label
        }
      })
      return type[0].label
    },

    // 切换时间范围
    changeTime() {
      const getYear = new Date().getFullYear()
      const getMonth = new Date().getMonth() < 10 ? '0' + (new Date().getMonth()) : new Date().getMonth()
      const getDay = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
      if (this.chooseTime === 1) {
        this.get_income_record_info_list.start_time = ''
        this.get_income_record_info_list.end_time = ''
        this.getIncomeExpendRecordInfoList()
      } else if (this.chooseTime === 2) {
        this.get_income_record_info_list.start_time = getDatatime(new Date(getYear, getMonth, getDay, 0, 0))
        this.get_income_record_info_list.end_time = getDatatime(new Date(getYear, getMonth, getDay, 23, 59))
        this.getIncomeExpendRecordInfoList()
      } else if (this.chooseTime === 3) {
        this.get_income_record_info_list.start_time = getDatatime(new Date(getYear, getMonth, getDay - 1, 0, 0))
        this.get_income_record_info_list.end_time = getDatatime(new Date(getYear, getMonth, getDay - 1, 23, 59))
        this.getIncomeExpendRecordInfoList()
      }
    },

    // 切换时间选择器范围
    changePickTime() {
      this.get_income_record_info_list.start_time = getDatatime(this.datePicker[0])
      this.get_income_record_info_list.end_time = getDatatime(this.datePicker[1])
      this.getIncomeExpendRecordInfoList()
    },

    // 切换每页条数方法
    changePageSize(data) {
      this.get_income_record_info_list.pageSize = data
      this.getIncomeExpendRecordInfoList()
    },

    // 切换页码方法
    changeCurrentPage(data) {
      this.get_income_record_info_list.currentPage = data
      this.getIncomeExpendRecordInfoList()
    },

    // 备注
    remarkEvent() {
      this.$prompt('请输入备注内容', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'textarea'
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '备注成功'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-wrap {
  width: 100%;
}
</style>
